/*
 * Toolbar
 *----------------------------------------------------------------------------*/
.mercury-toolbar-container {
  user-select: none;
  position: fixed;
  z-index: 10010;
  top: 0;
  left: 0;
  width: 100%;
  border-bottom: 1px solid #E2E1E2;
}
.mercury-toolbar {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background: #DDD;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(198,198,198)), color-stop(1, rgb(226,225,226)));
  background-image: -moz-linear-gradient(center bottom, rgb(198,198,198) 0%, rgb(226,225,226) 100%);
  border-bottom: 1px solid #727272;
  cursor: default;
}
.mercury-toolbar-button-container {
  float: left;
}
.mercury-toolbar-expander {
  position: absolute;
  display: none;
  right: 0;
  border-left: 1px solid #727272;
}
.mercury-button,
.mercury-button-group,
.mercury-separator,
.mercury-line-separator {
  display: block;
  float: left;
}
.mercury-separator,
.mercury-line-separator {
  width: 1px;
  border: 0;
  margin: 0;
}
.mercury-line-separator {
  width: 1px;
  background: #727272;
}
.mercury-button {
  cursor: pointer;
}
.mercury-button em {
  display: block;
  font-style: normal;
}
.mercury-expander {
  padding: 5px 0;
  border-radius: 4px;
  -moz-border-radius: 4px;
}
.mercury-expander .mercury-expander-button {
  cursor: default;
  white-space: nowrap;
  padding: 0 20px 0 10px;
}
.mercury-expander .mercury-expander-button:hover {
  background: #CCC;
}
.mercury-expander .mercury-expander-button em {
  display: inline-block;
  float: left;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  -webkit-background-size: 100% 100%;
  -moz-background-size: 100% 100%;
  background-size: 100% 100%;
}
.mercury-expander .mercury-expander-button span {
  display: inline-block;
  line-height: 20px;
}
.disabled .mercury-button,
.mercury-button.disabled {
  opacity: 0.33;
}
/*
 * Toolbar: Primary Toolbar
 *----------------------------------------------------------------------------*/
.mercury-primary-toolbar {
  position: relative;
  height: 58px;
  overflow: hidden;
  text-shadow: #EEE 0 1px 0;
}
.mercury-primary-toolbar .mercury-button {
  display: inline-block;
  height: 58px;
  margin-bottom: 20px;
  min-width: 55px;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  font-family: Helvetica, Tahoma, Arial, sans-serif;
}
.mercury-primary-toolbar .mercury-button.pressed {
  background-repeat: no-repeat;
}
.mercury-primary-toolbar .mercury-button em {
  margin: 0 -5px;
  height: 15px;
  padding-top: 41px;
  background-repeat: no-repeat;
  background-position: 50% 7px;
  font-size: 8.5pt;
  line-height: 15px;
  color: #222;
}
.mercury-primary-toolbar .mercury-button.active em {
  background-position: 51% 8px;
}

.mercury-primary-toolbar .mercury-separator,
.mercury-primary-toolbar .mercury-line-separator {
  display: inline-block;
  width: 1px;
  height: 50px;
  margin: 5px 20px 28px;
}
.mercury-primary-toolbar .mercury-toolbar-button-container {
  white-space: nowrap;
  padding-right: 10px;
}
.mercury-primary-toolbar .mercury-toolbar-expander {
  width: 12px;
  height: 58px;
  background-color: rgba(0, 0, 0, .2);
  background-repeat: no-repeat;
}
/*
 * Toolbar: Editable Region Toolbar
 *----------------------------------------------------------------------------*/
.mercury-editable-toolbar {
  padding: 3px 13px 1px 10px;
  border-top: 1px solid #E2E1E2;
  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, rgb(198,198,198)), color-stop(1, rgb(210,210,209)));
  background-image: -moz-linear-gradient(center bottom, rgb(198,198,198) 0%, rgb(210,210,209) 100%);
}
.mercury-editable-toolbar:after {
  content: '\00a0';
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
}
.mercury-editable-toolbar .mercury-separator,
.mercury-editable-toolbar .mercury-line-separator {
  height: 18px;
  padding: 0;
  margin: 0 7px 2px;
}
.mercury-editable-toolbar .mercury-separator {
  margin: 0 3px 2px;
}
.mercury-editable-toolbar .mercury-button-group {
  white-space: nowrap;
}
.mercury-editable-toolbar .mercury-button-group .mercury-button:first-child {
  width: 23px;
}
.mercury-editable-toolbar .mercury-button {
  width: 22px;
  height: 18px;
  margin: 0 0 2px;
}
.mercury-editable-toolbar .mercury-button em {
  display: none;
}
.mercury-editable-toolbar .mercury-button-palette {
  width: 23px;
  background-position: 0 -36px;
}
.mercury-editable-toolbar .mercury-button-select {
  width: auto !important;
  overflow: hidden;
  padding-left: 6px;
  background-position: -24px -36px;
}
.mercury-editable-toolbar .mercury-button-select em {
  display: block;
  padding-right: 15px;
  background-position: right -36px;
  cursor: pointer;
  white-space: nowrap;
  font-style: normal;
  font-family: Helvetica, Tahoma, Arial, sans-serif;
  font-size: 8.5pt;
  line-height: 19px;
  color: #222;
}
/* default buttons */
.mercury-editable-toolbar .mercury-bold-button                       { background-position: 0 0 }
.mercury-editable-toolbar .mercury-bold-button.active                { background-position: 0 -18px }
.mercury-editable-toolbar .mercury-italic-button                     { background-position: -23px 0 }
.mercury-editable-toolbar .mercury-italic-button.active              { background-position: -23px -18px }
.mercury-editable-toolbar .mercury-overline-button                   { background-position: -45px 0 }
.mercury-editable-toolbar .mercury-overline-button.active            { background-position: -45px -18px }
.mercury-editable-toolbar .mercury-strikethrough-button              { background-position: -67px 0 }
.mercury-editable-toolbar .mercury-strikethrough-button.active       { background-position: -67px -18px }
.mercury-editable-toolbar .mercury-underline-button                  { background-position: -89px 0 }
.mercury-editable-toolbar .mercury-underline-button.active           { background-position: -89px -18px }
.mercury-editable-toolbar .mercury-subscript-button                  { background-position: -112px 0 }
.mercury-editable-toolbar .mercury-subscript-button.active           { background-position: -112px -18px }
.mercury-editable-toolbar .mercury-superscript-button                { background-position: -135px 0 }
.mercury-editable-toolbar .mercury-superscript-button.active         { background-position: -135px -18px }
.mercury-editable-toolbar .mercury-justifyLeft-button                { background-position: -158px 0 }
.mercury-editable-toolbar .mercury-justifyLeft-button.active         { background-position: -158px -18px }
.mercury-editable-toolbar .mercury-justifyCenter-button              { background-position: -181px 0 }
.mercury-editable-toolbar .mercury-justifyCenter-button.active       { background-position: -181px -18px }
.mercury-editable-toolbar .mercury-justifyRight-button               { background-position: -203px 0 }
.mercury-editable-toolbar .mercury-justifyRight-button.active        { background-position: -203px -18px }
.mercury-editable-toolbar .mercury-justifyFull-button                { background-position: -225px 0 }
.mercury-editable-toolbar .mercury-justifyFull-button.active         { background-position: -225px -18px }
.mercury-editable-toolbar .mercury-insertUnorderedList-button        { background-position: -248px 0 }
.mercury-editable-toolbar .mercury-insertUnorderedList-button.active { background-position: -248px -18px }
.mercury-editable-toolbar .mercury-insertOrderedList-button          { background-position: -271px 0 }
.mercury-editable-toolbar .mercury-insertOrderedList-button.active   { background-position: -271px -18px }
.mercury-editable-toolbar .mercury-outdent-button                    { background-position: -294px 0 }
.mercury-editable-toolbar .mercury-outdent-button.active             { background-position: -294px -18px }
.mercury-editable-toolbar .mercury-indent-button                     { background-position: -317px 0 }
.mercury-editable-toolbar .mercury-indent-button.active              { background-position: -317px -18px }
.mercury-editable-toolbar .mercury-insertRowBefore-button            { background-position: -340px 0 }
.mercury-editable-toolbar .mercury-insertRowBefore-button.active     { background-position: -340px -18px }
.mercury-editable-toolbar .mercury-insertRowAfter-button             { background-position: -363px 0 }
.mercury-editable-toolbar .mercury-insertRowAfter-button.active      { background-position: -363px -18px }
.mercury-editable-toolbar .mercury-deleteRow-button                  { background-position: -385px 0 }
.mercury-editable-toolbar .mercury-deleteRow-button.active           { background-position: -385px -18px }
.mercury-editable-toolbar .mercury-insertColumnBefore-button         { background-position: -407px 0 }
.mercury-editable-toolbar .mercury-insertColumnBefore-button.active  { background-position: -407px -18px }
.mercury-editable-toolbar .mercury-insertColumnAfter-button          { background-position: -429px 0 }
.mercury-editable-toolbar .mercury-insertColumnAfter-button.active   { background-position: -429px -18px }
.mercury-editable-toolbar .mercury-deleteColumn-button               { background-position: -451px 0 }
.mercury-editable-toolbar .mercury-deleteColumn-button.active        { background-position: -451px -18px }
.mercury-editable-toolbar .mercury-increaseColspan-button            { background-position: -474px 0; width: 23px }
.mercury-editable-toolbar .mercury-increaseColspan-button.active     { background-position: -474px -18px }
.mercury-editable-toolbar .mercury-decreaseColspan-button            { background-position: -497px 0 }
.mercury-editable-toolbar .mercury-decreaseColspan-button.active     { background-position: -497px -18px }
.mercury-editable-toolbar .mercury-increaseRowspan-button            { background-position: -520px 0 }
.mercury-editable-toolbar .mercury-increaseRowspan-button.active     { background-position: -520px -18px }
.mercury-editable-toolbar .mercury-decreaseRowspan-button            { background-position: -542px 0 }
.mercury-editable-toolbar .mercury-decreaseRowspan-button.active     { background-position: -542px -18px }
.mercury-editable-toolbar .mercury-horizontalRule-button             { background-position: -564px 0 }
.mercury-editable-toolbar .mercury-horizontalRule-button.active      { background-position: -564px -18px }
.mercury-editable-toolbar .mercury-removeFormatting-button           { background-position: -588px 0 }
.mercury-editable-toolbar .mercury-removeFormatting-button.active    { background-position: -588px -18px }
.mercury-editable-toolbar .mercury-htmlEditor-button                 { background-position: -612px 0 }
.mercury-editable-toolbar .mercury-htmlEditor-button.active          { background-position: -612px -18px }
/*
 * Toolbar: Snippets Region Toolbar
 *----------------------------------------------------------------------------*/
.mercury-snippet-toolbar {
  position: absolute;
  top: 100px;
  left: 15px;
  border: 1px solid #727272;
  border-radius: 3px;
  -moz-border-radius: 3px;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .5);
  padding: 3px 7px 1px 7px;
}
.mercury-snippet-toolbar:after {
  content: '\00a0';
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
}
.mercury-snippet-toolbar .mercury-separator,
.mercury-snippet-toolbar .mercury-line-separator {
  height: 18px;
  padding: 0;
  margin: 0 7px 2px;
}
.mercury-snippet-toolbar .mercury-separator {
  margin: 0 3px 2px;
}
.mercury-snippet-toolbar .mercury-button-group {
  white-space: nowrap;
}
.mercury-snippet-toolbar .mercury-button-group .mercury-button:first-child {
  width: 23px;
}
.mercury-snippet-toolbar .mercury-button {
  width: 23px;
  height: 18px;
  margin: 0 0 2px;
}
.mercury-snippet-toolbar .mercury-button em {
  display: none;
}
/* default buttons */
.mercury-snippet-toolbar .mercury-editSnippet-button                { background-position: -24px 0 }
.mercury-snippet-toolbar .mercury-editSnippet-button.active         { background-position: -24px -18px }
.mercury-snippet-toolbar .mercury-removeSnippet-button              { background-position: -48px 0 }
.mercury-snippet-toolbar .mercury-removeSnippet-button.active       { background-position: -48px -18px }
.mercury-snippet-toolbar .mercury-dragsnippet-button                { background-position: -72px 0 }
.mercury-snippet-toolbar .mercury-dragsnippet-button.active         { background-position: -72px -18px }
